<template>
  <el-card class="wisplm-time-line-card">
    <el-timeline>
      <el-timeline-item v-for="(timeEvent, index) of timeEventList" :timestamp="timeEvent['time']" :key="index"
                        placement="top" :color="timeEvent['priority']">
        <div v-html="timeEvent['eventContent']"></div>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>

<script>
export default {
  name: "index",
  props: ['timeEventList'],
  data() {
    return {
      // timeEventList: [
      //   {
      //     time: '10 minutes ago',
      //     eventContent: 'Youtube,a video-sharing website,goes live $500',
      //     priority: 'green',
      //   },
      //   {
      //     time: '20 minutes ago',
      //     eventContent: 'New order placed #XF-2356.',
      //     priority: 'blue'
      //   },
      //   {
      //     time: '30 minutes ago',
      //     eventContent: 'john just buy your product Sell $250',
      //     priority: 'red'
      //   },
      //   {
      //     time: '15 minutes ago',
      //     eventContent: 'StumbleUpon is acquired by eBay. ',
      //     priority: 'green'
      //   },
      // ]
    }
  }
}
</script>

<style scoped>
.wisplm-time-line-card {
  height: 350px;
  overflow-y: auto;
}

.wisplm-time-line-card >>> .el-timeline-item__timestamp, .wisplm-time-line-card >>> .el-timeline-item__content {
  text-align: left;
}
</style>
